<template>
  <div class="map-container">
    <div class="menu-container">
      <el-menu
        default-active="2"
        class="el-menu-vertical-demo"
        @select="handleSelect"
      >
        <el-menu-item index="/map/basciMap">
          <i class="el-icon-menu"></i>
          <span slot="title">基础地图</span>
        </el-menu-item>
        <el-menu-item index="/map/rectangleMap">
          <i class="el-icon-document"></i>
          <span slot="title">地图矩形</span>
        </el-menu-item>
        <el-menu-item index="/map/pointMap">
          <i class="el-icon-setting"></i>
          <span slot="title">地图打点</span>
        </el-menu-item>
      </el-menu>
    </div>
    <div class="map-right">
      <router-view></router-view>
    </div>
  </div>
</template>
<script>
export default {
  methods: {
    handleSelect(index) {
      this.$router.push(index);
    },
  },
};
</script>
<style scoped>
.map-container {
  display: flex;
}
.menu-container {
  width: 200px;
}
.map-right {
  height: 800px;
  width: 100%;
  background-color: #fff;
}
</style>
